<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Stasis Tool Howto</title>
    <style type="text/css">		
		body {
			padding: 20px 20px 20px 80px;		
			/* font-family: Impact, Charcoal, sans-serif; */
			font: normal 1em Arial,sans-serif
		}
		h1 {
			text-indent: 1	50px;			
		}
		h3 {
			font-weight: normal;
		}
		p {
			font-size: 90%;
		}
		img {
			margin: 10px;
			border: 1px dashed lightgray;
		}
		.key {
			display: inline-block;
			width: 50px;
			padding-right: 30px;
			text-align: right;
			font-weight: bold;
		}
		li {
			padding-bottom: 15px;
		}
		.iblock {
			display: inline-block;
			text-align: right;			
		}
		.iblock>span {
			padding-right: 10px;			
			color: gray;
			font-size: 90%;
		}
		.disclaimer {
			width: 800px;
		}	
		.footer {
			text-align: center;
			padding-top: 50px;
			font-size: 80%;
		}	
		.mark {
			font-size: 80%;
			color: red;
			font-variant:small-caps;
			border: 1px solid #999;			
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 0 2px 0 2px;
		}
    </style>
  </head>  
  <body>
	<div class="wrap">
	  
	<h1>Stasis Tool user manual</h1>	  	
	<p class="disclaimer">		
		<strong>Disclaimer:</strong> I am not affiliated with Glitch or Tiny Speck, Inc. in any way.
		This application is provided <strong>as is</strong> and <strong>with all faults</strong>.<br/>I do not make any warranties of any kind.
		I will not be liable for any damages you or third party may suffer in connection with using, modifying, or distributing this software product.		
		
		You are solely responsible for your actions regarding the use of this software product including any copyright infringement or unauthorized use of Tiny Speck's works.		
		You may also be bound by the <a href="http://www.glitch.com/terms/">Terms&nbsp;of&nbsp;Service</a> of Glitch, so read them carefully.				
	</p>
	
	<h2>Howto:</h2>
	<p>
		<ol>
			<li>
				<h3>Obtain your glitchen's tsid.</h3>
				<p><ul>
					<li><a href="http://www.glitch.com/login/">Log in</a> to your glitch account.</li>
					<li>Go to your <strong>profile</strong> and locate your avatar's <strong>tsid</strong> in the url"					
						<br/><img src="howto_tsid2.png" alt="Locate the tsid in the url"/>
					</li>
					<li>Copy the <strong>tsid</strong> and go to step two!</li>
				</ul></p>
			</li>
			<li>
				<h3>Save your Glitchen forevah!</h3>
				<p><ul>
					<li>Go to the <a href="http://tower100.no-ip.org/GlitchTools/Stasis/">Sasis Tool</a>.</li>
					<li>Enter your <strong>tsid</strong> and click on the button.</li>
					<li>You should see your glitchen now.					
					<p>You can use the following keys to play with ... yourself:
							<div class="key">&larr;, &rarr;</div>to walk left and right. <span class="mark">new</span><br/>
							<div class="key">space</div>to jump. <span class="mark">new</span><br/>
							<div class="key">1</div>to be happy!<br/>
							<div class="key">2</div>to be angry!<br/>
							<div class="key">3</div>to be amazed!<br/>
							<div class="key">s</div>to fall sleep and wake up.<br/>
					</p>
					</li>
					<li>Save your glitchen.
					<p>
						Click with the right mouse button somewhere on the white space and choose "Save as.."<br/>
						<div class="iblock">							
							<img src="chrome_save.png" alt="Save page with Chrome"/><br/>
							<span>Chrome 23.0.1271.95</span>
						</div>
						<div class="iblock">							
							<img src="firefox_save.png" alt="Save page with FireFox"/><br/>
							<span>FireFox 16.0.2</span>
						</div>
					</p>
					</li>
					<li>Find <strong>Glitchen.html</strong> in the save location - open it in your browser whenever you want to see your glitchen.</li>					
				</ul></p>
			</li>
			<li>
				<h3>Optional checks:</h3>
				<ul>			
				<li>You should have a file named <strong>Glitchen.html</strong> and a folder named <strong>Glitchen_files</strong>.</li>
				<li>Check out <strong>Glitchen_files</strong> - it contains some raw animations!</li>
				<li>Look out for <strong>stasis.js</strong> - this is the file that you will have to replace (if you want) when a newer version comes out.</li>
				<li><strong>Change the background</strong> image by overwriting background.jpg from Glitchen_files! (The canvas size is 800x600) <span class="mark">new</span></li>
				<li>The end.</li>
				</ul>
			</li>			
		</ol>
	</p>
		
	</div>  
	
	<div class="footer">
		Copyright &copy; 2013 by Zmei:Zelen</br>
		<a rel="license" href="LICENSE">MIT Lincense</a>
	</div>
	
  </body>
</html>
